{% extends "base.html" %}

{% block title %}{{ detail.student.real_name }} - 学员详情 - 乒乓球培训管理系统{% endblock %}

{% block extra_css %}
<style>
    .student-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 8px;
        padding: 30px;
        margin-bottom: 30px;
    }

    .student-avatar-lg {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid rgba(255,255,255,0.3);
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    }

    .student-status-badge {
        font-size: 0.9rem;
        padding: 5px 15px;
        border-radius: 20px;
        margin-left: 10px;
        background: rgba(255,255,255,0.2);
    }

    .info-card {
        background: white;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }

    .stat-item {
        text-align: center;
        padding: 20px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }

    .stat-number {
        font-size: 2rem;
        font-weight: bold;
        color: #007bff;
        display: block;
        margin-bottom: 5px;
    }

    .stat-label {
        color: #666;
        font-size: 0.9rem;
    }

    .progress-section {
        background: white;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }

    .progress-item {
        margin-bottom: 20px;
    }

    .progress-item:last-child {
        margin-bottom: 0;
    }

    .progress-label {
        display: flex;
        justify-content-between;
        align-items: center;
        margin-bottom: 8px;
    }

    .progress-title {
        font-weight: 600;
        color: #333;
    }

    .progress-value {
        color: #666;
        font-size: 0.9rem;
    }

    .progress {
        height: 8px;
        border-radius: 4px;
    }

    .info-item {
        margin-bottom: 15px;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }

    .info-item:last-child {
        border-bottom: none;
    }

    .info-label {
        font-weight: 600;
        color: #333;
        margin-bottom: 5px;
    }

    .info-value {
        color: #666;
    }

    .activity-timeline {
        background: white;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }

    .timeline-item {
        display: flex;
        align-items: start;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
    }

    .timeline-item:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    .timeline-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .timeline-class {
        background: #e7f3ff;
        color: #0066cc;
    }

    .timeline-evaluation {
        background: #fff3cd;
        color: #856404;
    }

    .timeline-progress {
        background: #d4edda;
        color: #155724;
    }

    .timeline-content {
        flex: 1;
    }

    .timeline-title {
        font-weight: 600;
        margin-bottom: 5px;
    }

    .timeline-description {
        color: #666;
        font-size: 0.9rem;
        margin-bottom: 5px;
    }

    .timeline-time {
        color: #999;
        font-size: 0.8rem;
    }

    .section-title {
        color: #333;
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e5e5e5;
        display: flex;
        align-items: center;
    }

    .section-title i {
        margin-right: 10px;
        color: #007bff;
    }

    .action-buttons {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-top: 30px;
    }

    .btn-primary-large {
        background: linear-gradient(45deg, #007bff, #0056b3);
        border: none;
        border-radius: 25px;
        padding: 12px 30px;
        color: white;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .btn-primary-large:hover {
        background: linear-gradient(45deg, #0056b3, #004085);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    }

    .btn-success-large {
        background: linear-gradient(45deg, #28a745, #20c997);
        border: none;
        border-radius: 25px;
        padding: 12px 30px;
        color: white;
        font-size: 1.1rem;
    }

    .btn-success-large:hover {
        background: linear-gradient(45deg, #218838, #1ea085);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }

    .back-button {
        background: #6c757d;
        border: none;
        border-radius: 25px;
        padding: 8px 20px;
        color: white;
    }

    .back-button:hover {
        background: #545b62;
        color: white;
    }

    .rating-display {
        text-align: center;
        padding: 20px;
        background: linear-gradient(45deg, #ffd700, #ff8c00);
        color: white;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .rating-stars {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .rating-number {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .payment-status {
        padding: 10px 15px;
        border-radius: 6px;
        font-weight: 500;
        margin-top: 10px;
    }

    .payment-good {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .payment-warning {
        background: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
    }

    .payment-overdue {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }

    .empty-timeline {
        text-align: center;
        padding: 40px 20px;
        color: #666;
    }

    .empty-timeline i {
        font-size: 3rem;
        color: #ddd;
        margin-bottom: 15px;
    }

    .contact-info {
        background: #e7f3ff;
        border: 1px solid #b3d7ff;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
    }

    .quick-stats {
        display: flex;
        justify-content: space-around;
        background: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
    }

    .quick-stat {
        text-align: center;
    }

    .quick-stat-number {
        font-size: 1.5rem;
        font-weight: bold;
        color: #007bff;
        display: block;
    }

    .quick-stat-label {
        font-size: 0.8rem;
        color: #666;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 返回按钮 -->
    <div class="row mb-3">
        <div class="col-12">
            <a href="{{ url_for('coach_student.my_students') }}" class="btn back-button">
                <i class="bi bi-arrow-left me-2"></i>返回学员列表
            </a>
        </div>
    </div>

    <!-- 学员基本信息 -->
    <div class="row">
        <div class="col-12">
            <div class="student-header">
                <div class="row align-items-center">
                    <div class="col-md-2">
                        <img src="{{ detail.student.photo_url or url_for('static', filename='images/default-avatar.svg') }}"
                             alt="{{ detail.student.real_name }}" class="student-avatar-lg">
                    </div>
                    <div class="col-md-6">
                        <h2 class="mb-2">
                            {{ detail.student.real_name }}
                            <span class="student-status-badge">
                                活跃学员
                            </span>
                        </h2>
                        <p class="mb-3 fs-5">
                            <i class="bi bi-person me-2"></i>{{ '男' if detail.student.gender == 'male' else '女' }}
                            {% if detail.student.age %}・{{ detail.student.age }}岁{% endif %}
                            <span class="ms-3">
                                <i class="bi bi-calendar me-2"></i>师生关系：{{ detail.relation.responded_at.strftime('%Y年%m月') if detail.relation.responded_at }}
                            </span>
                        </p>
                        {% if detail.student.bio %}
                        <p class="mb-0 fs-6" style="opacity: 0.9;">{{ detail.student.bio }}</p>
                        {% endif %}
                    </div>
                    <div class="col-md-4">
                        <div class="quick-stats">
                            <div class="quick-stat">
                                <span class="quick-stat-number">{{ detail.total_classes }}</span>
                                <span class="quick-stat-label">总课程</span>
                            </div>
                            <div class="quick-stat">
                                <span class="quick-stat-number">{{ detail.completed_classes }}</span>
                                <span class="quick-stat-label">已完成</span>
                            </div>
                            <div class="quick-stat">
                                <span class="quick-stat-number">{{ "%.1f"|format(detail.attendance_rate) }}%</span>
                                <span class="quick-stat-label">出勤率</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 左侧 - 统计和信息 -->
        <div class="col-md-4">
            <!-- 评分展示 -->
            <div class="rating-display">
                <div class="rating-stars">
                    {% for i in range(5) %}
                        {% if i < detail.average_rating %}
                            <i class="bi bi-star-fill"></i>
                        {% else %}
                            <i class="bi bi-star"></i>
                        {% endif %}
                    {% endfor %}
                </div>
                <div class="rating-number">{{ "%.1f"|format(detail.average_rating or 0.0) }}</div>
                <div>平均评分</div>
            </div>

            <!-- 统计数据 -->
            <div class="row">
                <div class="col-6">
                    <div class="stat-item">
                        <span class="stat-number">{{ detail.total_classes }}</span>
                        <span class="stat-label">总课程数</span>
                    </div>
                </div>
                <div class="col-6">
                    <div class="stat-item">
                        <span class="stat-number">{{ detail.upcoming_classes }}</span>
                        <span class="stat-label">待上课程</span>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-6">
                    <div class="stat-item">
                        <span class="stat-number">{{ "%.1f"|format(detail.total_hours) }}</span>
                        <span class="stat-label">总课时</span>
                    </div>
                </div>
                <div class="col-6">
                    <div class="stat-item">
                        <span class="stat-number">{{ "%.1f"|format(detail.attendance_rate) }}%</span>
                        <span class="stat-label">出勤率</span>
                    </div>
                </div>
            </div>

            <!-- 联系信息 -->
            <div class="contact-info">
                <h6 class="mb-3">
                    <i class="bi bi-person-lines-fill me-2"></i>联系信息
                </h6>
                <div class="info-item">
                    <div class="info-label">
                        <i class="bi bi-telephone me-2"></i>电话
                    </div>
                    <div class="info-value">
                        {{ detail.student.phone or '未填写' }}
                    </div>
                </div>
                <div class="info-item">
                    <div class="info-label">
                        <i class="bi bi-envelope me-2"></i>邮箱
                    </div>
                    <div class="info-value">
                        {{ detail.student.email or '未填写' }}
                    </div>
                </div>
            </div>

            <!-- 付款状态 -->
            <div class="payment-status payment-{{ detail.payment_status }}">
                <strong>
                    <i class="bi bi-credit-card me-2"></i>付款状态：
                    {% if detail.payment_status == 'good' %}
                        正常
                    {% elif detail.payment_status == 'warning' %}
                        提醒
                    {% else %}
                        逾期
                    {% endif %}
                </strong>
            </div>
        </div>

        <!-- 右侧 - 详细信息和进度 -->
        <div class="col-md-8">
            <!-- 学习进度 -->
            <div class="progress-section">
                <h5 class="mb-4">
                    <i class="bi bi-graph-up me-2"></i>学习进度
                </h5>

                <div class="progress-item">
                    <div class="progress-label">
                        <span class="progress-title">基础动作掌握</span>
                        <span class="progress-value">75%</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-primary" style="width: 75%"></div>
                    </div>
                </div>

                <div class="progress-item">
                    <div class="progress-label">
                        <span class="progress-title">正手攻球</span>
                        <span class="progress-value">80%</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-success" style="width: 80%"></div>
                    </div>
                </div>

                <div class="progress-item">
                    <div class="progress-label">
                        <span class="progress-title">反手推挡</span>
                        <span class="progress-value">60%</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-warning" style="width: 60%"></div>
                    </div>
                </div>

                <div class="progress-item">
                    <div class="progress-label">
                        <span class="progress-title">发球技术</span>
                        <span class="progress-value">45%</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-info" style="width: 45%"></div>
                    </div>
                </div>

                <div class="progress-item">
                    <div class="progress-label">
                        <span class="progress-title">步法训练</span>
                        <span class="progress-value">55%</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar bg-secondary" style="width: 55%"></div>
                    </div>
                </div>
            </div>

            <!-- 学员详细信息 -->
            <div class="info-card">
                <h5 class="mb-4">
                    <i class="bi bi-info-circle me-2"></i>详细信息
                </h5>

                <div class="row">
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">学员编号</div>
                            <div class="info-value">STU{{ detail.student.id }}</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">注册时间</div>
                            <div class="info-value">
                                {{ detail.student.created_at.strftime('%Y年%m月%d日') if detail.student.created_at }}
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">所属校区</div>
                            <div class="info-value">
                                {{ detail.student.campus.name if detail.student.campus else '未分配' }}
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">师生关系建立</div>
                            <div class="info-value">
                                {{ detail.relation.responded_at.strftime('%Y年%m月%d日') if detail.relation.responded_at }}
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">上次上课</div>
                            <div class="info-value">
                                {% if detail.last_class_date %}
                                    {{ detail.last_class_date.strftime('%Y年%m月%d日') }}
                                {% else %}
                                    还未上课
                                {% endif %}
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">学习状态</div>
                            <div class="info-value">
                                <span class="badge bg-success">活跃学习</span>
                            </div>
                        </div>
                    </div>
                </div>

                {% if detail.relation.apply_note %}
                <div class="info-item">
                    <div class="info-label">申请时的说明</div>
                    <div class="info-value">{{ detail.relation.apply_note }}</div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>


</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 加载学员详细数据
    loadStudentDetails();
});

function loadStudentDetails() {
    // 这里可以通过AJAX加载更多学员数据
    console.log('学员详情页面已加载');
}
</script>
{% endblock %}